<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据的双向绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--
       Vue模板语法的2大分类
        1.插值语法  用于解析标签体内容 写法:   {{}}里面写js表达式 自动获取data中的属性
        2.指令语法 用于解析标签属性,标签体内容,绑定事件....
            v-bind:href="xxx"  简写成:href="xxx"

    数据绑定
        1.单向数据绑定 (v-bind) 数据只能从data流向页面
        2.双向数据绑定(v-model)  数据不仅能从data流向页面 也可以从页面流向data
            备注:
            1)双向数据绑定一般针对表单类的元素(能输入 即有value值 比如input select等)
            2)v-model:value可以简写成v-model 因为v-model默认收集的是value的值
            3)v-model只有应用在输入类节点.且节点有value值时才有意义
        -->
    <!--一般写法-->
    单向数据绑定:<input type="text" v-bind:value="name"><br>
    双向数据绑定: <input type="text" v-model:value="name">
    <hr>
    <!--简写方式-->
    单向数据绑定:<input type="text" :value="name"><br>
    双向数据绑定: <input type="text" v-model="name">

</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data(){
            return {
                name:"油菜花"
            }
        }
    })
</script>
</body>
</html>